<template>
  <q-btn :icon="avatar" no-caps :label="userStore.nickname || userStore.username" class="q-ml-sm">
    <q-menu>
      <q-list>
        <q-item v-close-popup clickable :to="{ name: 'UserCenter' }">
          <q-item-section side class="q-pr-sm">
            <q-icon :name="mdiAccountOutline" size="xs" />
          </q-item-section>
          <q-item-section>个人中心</q-item-section>
        </q-item>

        <q-separator />

        <q-item v-close-popup clickable @click="logout">
          <q-item-section side class="q-pr-sm">
            <q-icon :name="mdiLogout" size="xs" />
          </q-item-section>
          <q-item-section>退出登录</q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-btn>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { mdiAccountCircleOutline, mdiAccountOutline, mdiLogout } from '@quasar/extras/mdi-v7';

  import { MessageBox } from 'src/utils';
  import { useUserStore } from 'src/stores';

  const userStore = useUserStore();
  const avatar = computed(() => (userStore.avatar ? 'img:' + userStore.avatar : mdiAccountCircleOutline));

  const router = useRouter();
  const logout = () => {
    MessageBox.confirm('确定要退出登录吗？').onOk(() => userStore.doLogout().then(() => router.push({ name: 'Login' })));
  };
</script>
